<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!--edge浏览器H5兼容设置-->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!--360浏览器H5兼容设置-->
		<meta name="renderer" content="webkit" />
		<title>学子商城</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!--导入核心文件-->
		<script src="../bootstrap3/js/holder.js"></script>
		<link href="../bootstrap3/css/bootstrap.css" rel="stylesheet" type="text/css">
		<script src="../bootstrap3/jquery-1.9.1.min.js"></script>
		<script src="../bootstrap3/js/bootstrap.js"></script>
		<!-- 字体图标 -->
		<link rel="stylesheet" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="../css/top.css" />
		<link rel="stylesheet" type="text/css" href="../css/index.css" />
		<link rel="stylesheet" type="text/css" href="../css/layout.css" />
		<link rel="stylesheet" type="text/css" href="../css/reg.css" />
		<link rel="stylesheet" type="text/css" href="../css/footer.css" />
	</head>
	<body>
		<!--头部-->
		<header class="header">
			<img src="../images/index/stumalllogo.png" alt="" />
			<span class="pull-right"><small>欢迎访问</small><b>学子商城</b></span>
		</header>
		<!--主体-->
		<div class="container mycontent text-left">
			<!--透明层 -->
			<div class="regDiv">
				<p>新用户注册</p>
				<!--表单开始-->
				<form   class="form-horizontal" role="form">
					<!--用户名-->
					<div class="form-group">
						<label  class="col-md-3 control-label">名字：</label>
						<div class="col-md-8">
							<input id="username" type="text" class="form-control"  placeholder="请输入用户名" >
							<span id="helpBlock1" class="help-block"></span>
						</div>

					</div>
					<!--密码-->
					<div class="form-group">
						<label class="col-md-3 control-label"> 密码：</label>
						<div class="col-md-8">
							<input id="pwd" type="password" class="form-control"  placeholder="请输入密码">
							<span id="helpBlock2" class="help-block"></span>
						</div>
					</div>
					<!--确认密码-->
					<div class="form-group">
						<label  class="col-md-3 control-label"> 确认密码：</label>
						<div class="col-md-8">
							<input id="rePwd" type="password" class="form-control"  placeholder="请再次输入密码">
							<span id="helpBlock3" class="help-block"></span>
						</div>
					</div>
					<!--提交按钮-->
					<div class="form-group">
						<label class="col-md-3 control-label"></label>
						<div class="col-md-8">
							<input id="btnSubmit" class="btn btn-primary" type="button" value="立即注册" />
							<span class="pull-right"><small>已经有账号？</small><a href="login.html">登录</a></span>
						</div>
					</div>
				</form>
			</div>
		</div>
		<!--页脚开始-->
		<footer class="footer">
			<!-- 品质保障，私人定制等-->
			<div class="text-center rights container">
				<div class="col-md-offset-2 col-md-2">
					<span class="fa fa-thumbs-o-up"></span>
					<p>品质保障</p>
				</div>
				<div class="col-md-2">
					<span class="fa fa-address-card-o"></span>
					<p>私人订制</p>
				</div>
				<div class="col-md-2">
					<span class="fa fa-graduation-cap"></span>
					<p>学生特供</p>
				</div>
				<div class="col-md-2">
					<span class="fa fa-bitcoin"></span>
					<p>专属特权</p>
				</div>
			</div>
			<!--联系我们、下载客户端等-->
			<div class="container beforeBottom">
				<div class="col-md-offset-1 col-md-3">
					<div><img src="../images/index/stumalllogo.png" alt="" class="footLogo" /></div>
					<div><img src="../images/index/footerFont.png" alt="" /></div>
				</div>
				<div class="col-md-4 callus text-center">
					<div class="col-md-4">
						<ul>
							<li><a href="#"><p>买家帮助</p></a></li>
							<li><a href="#">新手指南</a></li>
							<li><a href="#">服务保障</a></li>
							<li><a href="#">常见问题</a></li>
						</ul>
					</div>
					<div class="col-md-4">
						<ul>
							<li><a href="#"><p>商家帮助</p></a></li>
							<li><a href="#">商家入驻</a></li>
							<li><a href="#">商家后台</a></li>
						</ul>
					</div>
					<div class="col-md-4">
						<ul>
							<li><a href="#"><p>关于我们</p></a></li>
							<li><a href="#">关于达内</a></li>
							<li><a href="#">联系我们</a></li>
							<li>
								<span class="fa fa-wechat"></span>
								<span class="fa fa-weibo"></span>
							</li>
						</ul>
					</div>
				</div>
				<div class="col-md-4">
					<div class="col-md-5">
						<p>学子商城客户端</p>
						<img src="../images/index/ios.png" class="lf">
						<img src="../images/index/android.png" alt="" class="lf" />
					</div>
					<div class="col-md-6">
						<img src="../images/index/erweima.png">
					</div>
				</div>
			</div>
			<!-- 页面底部-备案号 #footer -->
			<div class="col-md-12 text-center bottom">
				Copyright © 2018 Tedu.cn All Rights Reserved 京ICP备08000853号-56 <a target="_blank" href="http://www.tedu.cn/">达内时代科技集团有限公司</a> 版权所有
			</div>
		</footer>
		<!--页脚结束-->
	<script type="text/javascript">
		var regUrl="../user/register"

		$(function(){ // 页面就绪事件
			// 为提交按钮添加点击事件
			$("#btnSubmit").click(function(){
				// 获取表单数据
				var username=$("#username").val();
				var pwd=$("#pwd").val();
				var rePwd=$("#rePwd").val();
				// 前台表单验证
				var flag=true;
				// 非空验证
				/*flag=checkEmpty("username","用户名不能为空")&&flag;
				flag=checkEmpty("pwd","密码不能为空")&&flag;
				flag=checkEmpty("rePwd","确认密码不能为空")&&flag;*/

				// 格式验证
				// 用户名：长度不低于6位
				// 密码/确认密码：长度不低于8位，数字字母大小写组合

				// 判断页面中的input是否都是验证成功的状态
				var divArr=$("div.has-success");
				if(divArr.length!=3){ // 存在异常项
					return;
				}

				// 逻辑验证
				// 两次密码一致
				flag=checkRePwd("pwd","rePwd","两次密码应该一致")&&flag;

				// 用户名不存在 TODO


				// 有验证异常则不提交表单
				if(flag==false){
					return;
				}
				// 提交表单
				// 请求参数属性名:变量名
				// 请求参数属性名要和后台实体类的属性名一致
				var params={
					username:username,
					password:pwd

				}
				// 发送AJAX请求
				$.post(regUrl,params,function(result){
					// 处理响应数据
					if(result.code==1000){ // 正常响应
						alert("注册成功，点击跳转登录页面");
						// 跳转登录页面
						window.location.href="login.html";
					}else{ // 异常响应
						alert(result.msg);
					}
				});
			});

			$("#username").bind("input",function(){
				checkLength("username",6,12);
			});

			// 为用户名输入框添加失去焦点事件
			$("#username").blur(function(){

				if(!checkEmpty("username","用户名不能为空")) {
					return;
				}
				if(!checkLength("username",6,12)) {
					return;
				}
				// 异步验证用户名是否存在
				var url="../user/checkUsername";
				var params={
					username:$("#username").val()
				};
				$.get(url,params,function(result){
					if(result.code==1000 && result.msg=="false"){ // 不存在
						$("#username").parents(".form-group").removeClass("has-error").addClass("has-success");
						// 找到input相邻的span，在其中添加错误提示信息
						$("#username").next("span").text("该用户可以使用");
					}else if(result.code==1000 && result.msg=="true"){ // 已存在
						$("#username").parents(".form-group").addClass("has-error");
						// 找到input相邻的span，在其中添加错误提示信息
						$("#username").next("span").text("该用户名已存在");
					}else{
						$("#username").parents(".form-group").addClass("has-error");
						// 找到input相邻的span，在其中添加错误提示信息
						$("#username").next("span").text(result.msg);
					}
				});
			});

			// 为密码输入框添加失去焦点事件
			$("#pwd").blur(function(){
				checkEmpty("pwd","密码不能为空");
			});

			// 为用户名输入框添加失去焦点事件
			$("#rePwd").blur(function(){
				var notEmpty=checkEmpty("rePwd","确认密码不能为空");
				if(notEmpty){
					checkRePwd("pwd","rePwd","两次密码不一致");
				}
			});

		});

		function checkLength(name,minLength,maxLength){
			if($("#"+name).val().length<minLength){ // 小于长度
				$("#"+name).parents(".form-group").addClass("has-error").removeClass("has-success");
				// 找到input相邻的span，在其中添加错误提示信息
				$("#"+name).next("span").text("长度不能小于"+minLength);
				return false;
			}else if($("#"+name).val().length>maxLength){
				$("#"+name).parents(".form-group").addClass("has-error").removeClass("has-success");
				// 找到input相邻的span，在其中添加错误提示信息
				$("#"+name).next("span").text("长度不能大于"+maxLength);
				return false;
			}else{ // 长度合适
				$("#"+name).parents(".form-group").removeClass("has-error").addClass("has-success");
				// 找到input相邻的span，在其中添加错误提示信息
				$("#"+name).next("span").text("");
				return true;
			}
		}

		function checkEmpty(name,msg){
			if($("#"+name).val()==""){ // 为空
				$("#"+name).parents(".form-group").addClass("has-error").removeClass("has-success");
				// 找到input相邻的span，在其中添加错误提示信息
				$("#"+name).next("span").text(msg);
				return false;
			}else{ // 不为空
				$("#"+name).parents(".form-group").removeClass("has-error").addClass("has-success");
				// 找到input相邻的span，在其中添加错误提示信息
				$("#"+name).next("span").text("");
				return true;
			}
		}

		function checkRePwd(name,name2,msg){
			if($("#"+name).val()==""){ // 为空则不进行一致验证
				return false;
			}

			if($("#"+name).val()!=$("#"+name2).val()){ // 两次密码不一致
				$("#"+name2).parents(".form-group").addClass("has-error").removeClass("has-success");
				// 找到input相邻的span，在其中添加错误提示信息
				$("#"+name2).next("span").text(msg);
				return false;
			}else{ // 不为空
				$("#"+name2).parents(".form-group").removeClass("has-error").addClass("has-success");
				// 找到input相邻的span，在其中添加错误提示信息
				$("#"+name2).next("span").text("");
				return true;
			}
		}

	</script>
	</body>

</html>